import React, { useState, useEffect, useImperativeHandle } from 'react';
import { Table, Form } from 'antd';
import { getMaterialModalLandColumns } from '../mconfig/MaterialModalLandColumns';
import { AcceptanceManageAPI } from '../common/type';
import { getKeyRouter } from '@/utils';
import { commonPageSizeOptions, showTotalInfo } from '@/common/constVariable';
import pageStyles from '@/common/pageLayout.less';
import '../common/styles.less';
import Cls from 'classnames';

export const UploadSecordStep = React.forwardRef<AcceptanceManageAPI.IUploadFormRef, AcceptanceManageAPI.ISecordStepUpload>(
  ({ prefix, current, tableList }, ref) => {
    /**updata表单的ref*/
    const [uploadForm] = Form.useForm();

    useImperativeHandle(ref, () => ({
      secordStepForm: uploadForm,
    }));

    // 表格选中行的key
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    // 表格选中行内容
    const [selectedRows, setSelectedRows] = useState<Record<string, any>[]>([]);

    // 材料表格数据
    const [dataSource, setDataSource] = useState<Record<string, any>[]>(uploadForm?.getFieldValue('table'));

    const setTableRowClassName = (_: Record<string, any>, index: number) => {
      return index % 2 == 0 ? 'double-row' : 'default-row';
    };

    // 表格复选框配置
    // const rowSelection: any = {
    //   selectedRowKeys,
    //   onChange: (selectedRowKeys: React.Key[], selectedRows: Record<string, any>[]) => {
    //     setSelectedRowKeys(selectedRowKeys);
    //     setSelectedRows(selectedRows);
    //   },
    //   type: 'radio',
    // };

    // 处理导入的列表数据
    // const fetchGetMaterialList = useMemo(() => {
    //   if (tableList && tableList?.length > 0) {
    //     tableList?.map((item, index) => {
    //       return (item.keyID = `${item.unitPrice}${index}${getKeyRouter()}${getKeyRouter()}${getKeyRouter()}`);
    //     });
    //     return tableList;
    //   }
    // }, [tableList]);

    /** 监听导入的数据  保存一份 */
    useEffect(() => {
      if (tableList && tableList?.length > 0) {
        let newTableList: any[] = [];
        tableList?.map((item, index) => {
          newTableList.push(
            Object.assign({}, item, {
              keyID: `${item.unitPrice}${index}${getKeyRouter()}${getKeyRouter()}${getKeyRouter()}`,
            }),
          );
        });

        setDataSource(newTableList);
      }
    }, [tableList]);

    /** 监听保存的导入数据  渲染table */
    useEffect(() => {
      if (dataSource?.length > 0) {
        uploadForm?.setFieldsValue({
          table: dataSource?.length > 0 ? dataSource : [],
        });
      }
    }, [dataSource?.length]);

    /** 表格分页方法改变事件 */
    const handlePaginationChange = () => {};

    return (
      <div className={Cls('list-table', 'MaterialModalTable')} style={{ display: current === 1 ? 'block' : 'none' }}>
        {/* <div className={pageStyles['fromView-styles']}> */}
        <Form form={uploadForm}>
          <Form.Item name="table" valuePropName="dataSource">
            <Table
              size="small"
              bordered
              scroll={{ x: 1200, y: 'true' }}
              rowClassName={setTableRowClassName}
              // loading={getProjectLoading}
              dataSource={dataSource}
              columns={getMaterialModalLandColumns(uploadForm)}
              rowKey={'keyID'}
              pagination={{
                showQuickJumper: true,
                showSizeChanger: true,
                pageSizeOptions: commonPageSizeOptions,
                showTotal: showTotalInfo,
                onChange: handlePaginationChange as any,
                pageSize: 10,
                current: 1,
                total: dataSource?.length || 0,
              }}
            />
          </Form.Item>
        </Form>
        {/* </div> */}
      </div>
    );
  },
);
